<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/echarts.js"></script>
    <script src="/jquery-2.1.1.min.js"></script>

</head>

<script  type="text/javascript">
    $(function () {
        initDomDiv();
    });

    function  initDomDiv(){
       var  myChart=echarts.init(document.getElementById('bar'));

        $.ajax({
            url:"../echarts/queryOrderForm",
            type:"POST",
            async:false,
            success:function(resulty){
             var dat=new Array();
             var cou=new Array();
             var price=new Array();
             $.each(resulty,function(index,obj){
                 dat[index]=obj.sname;
                 cou[index]=obj.count;
                 price[index]=obj.unitprice;
             });


                var option = {
                    title: {
                        text: 'ECharts 入门示例',
                        textStyle: {
                            color: '#000',
                            fontStyle: 'italic'
                        }
                    },
                    tooltip: {},
                    legend: {

                        data:['销量','销售额']
                    },
                    xAxis: {
                        data:dat
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data:cou,
                        barWidth :30
                    },
                        {
                            name: '销量',
                            type: 'line',
                            data:cou,

                        },

                        {
                            name: '销售额',
                            type: 'bar',
                            data:price,
                            barWidth :30
                        },

                        {
                            name: '销售额',
                            type: 'line',
                            data:price,

                        }
                    ]
                };

               // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            },
            error:function(){
                alert("AJAX访问异常");
            }
        })

    }
</script>

<body>

  <div  id="bar"   style="width:1000px;height:600px;" ></div>

</body>
</html>